<template>
    <layout :config="navConfig">
        <template #default>
            <div class="m-comfirm-pay">
                <div class="title">打款截图上传</div>
                <div class="upload-button">
                    <md-image-reader @select="onReaderSelect" @complete="onReaderComplete"></md-image-reader>
                    <i class="iconfont icon-camera--fill"></i>
                    <span>点击上传</span>
                    <img :src="base64Img" alt="pay" v-if="base64Img">
                </div>
                <button @click="confirm">确认</button>
            </div>
        </template>
    </layout>
</template>

<script lang="ts">
    import {Component, Vue} from "vue-property-decorator";
    import {INavigation} from "@/types";
    import {ImageReader, Toast} from "mand-mobile";

    @Component({
        name: "ComfirmPay",
        components: {
            mdImageReader: ImageReader
        },
        created: function () {
            this.formData_1.type = this.$route.query.type;
            this.formData_1.paymoney = this.$route.query.money
            this.flag = this.$route.query.flag;
            if (this.$route.query.flag == "2") {
                this.formData_2.userpayid = this.$route.query.userpayid;
                this.formData_2.paymoney = this.$route.query.money;
            }

        },
    })
    export default class extends Vue {
        navConfig: INavigation = {
            text: "确认支付"
        };
        base64Img = "";
        flag= 0;
        errors="";
        formData_1 = {
            username: "",
            type: 1,
            paymoney: 0,
            img: ""
        };
        formData_2 = {
            userpayid: "",
            paymoney: 0,
            img: ""
        };

        onReaderSelect() {
            Toast.loading("图片上传中...");
        };

        onReaderComplete(name: any, {dataUrl, blob, file}: any) {
            try {
                let param = new FormData();
                param.append("photos", blob, file.name);
                this.$api.postFile("/upload/uploadImg", param).then(res => {
                    Toast.hide();
                    this.formData_1.img = res.fileName;
                    this.formData_2.img = res.fileName;
                    this.base64Img = dataUrl;
                    console.log(res);
                }).catch(res => {
                    Toast.info("上传失败！",1000);
                })

            }catch (e) {
                Toast.info("上传失败！",1000);
                this.errors=e.toString();
            }

            console.log(name, dataUrl, blob);
        };

        confirm() {
            if (this.formData_1.img == "") {
                Toast.info('请先上传打款验证图片！', 500);
                return;
            }
            if (localStorage.getItem('users1') != "") {
                let usera = JSON.parse(localStorage.getItem('users1'));
                this.formData_1.username=usera.username;
            }

            Toast.loading("请求中...");
            if (this.flag == "1") {
                this.$api.savetype(this.formData_1).then(res => {
                    Toast.hide();
                    console.log(res.success);
                    if (res.success == 200) {
                        Toast.info('提交成功！', 500)
                        setTimeout(() => {
                            this.$router.push({
                                path: '/'
                            })
                        }, 500)

                    } else {
                        Toast.info("提交失败！",1000);
                    }
                }).catch(res => {
                    Toast.hide();
                    Toast.info("请求失败！",1000);
                })
            }

            if (this.flag == "2") {
                this.$api.userpayAdd(this.formData_2).then(res => {
                    Toast.hide();
                    console.log(res.success);
                    if (res.success == 200) {
                        Toast.info('提交成功！', 500)
                        setTimeout(() => {
                            this.$router.push({
                                path: '/'
                            })
                        }, 500)

                    } else {
                        Toast.info("提交失败！",1000);
                    }
                }).catch(res => {
                    Toast.hide();
                    Toast.info("请求失败！",1000);
                })
            }
        }
    }
</script>

<style lang="scss">
    @import "../assets/styles/comfirmPay.scss";
</style>
